<template>
  <div class="content_box">
    <div class="tx_msg">
      <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230301/Y8D81CAeFLORCQyDEubE.png" alt="">
      <div class="box" >
        <p class="tx">
          <img :src="myStore.headImg" alt="">
        </p>
        <!-- <img :src="myStore.headImg" alt=""> -->
        <!-- <div class="msg">
          <p class="tell">{{myStore.storeName}}</p>
          <p class="text">店铺有效期：{{myStore.validTime}}</p>
        </div> -->
        <div class="msg">
          <p class="tell">{{myStore.storeName}} <span @click="toEditStore" v-if="role == 'admin'"><van-icon name="edit" /></span></p>
          <p class="text">有效期至 {{myStore.validTime}}</p>
        </div>
      </div>
      <!-- <p class="anniu" @click="toRenew">立即续费</p> -->
    </div>

    <div class="my_service">
      <!-- <div class="box" @click="toNews">
        <img src="/static/images/kc.png" alt="">
        <p class="text">经营课程</p>
      </div>
      <div class="box" @click="toNews">
        <img src="/static/images/pt.png" alt=""> 
        <p class="text">平台功能</p>
      </div>
      <div class="box" @click="toNews">
        <img src="/static/images/xx.png" alt="">
        <p class="text">我的消息</p>
      </div> -->
      <div class="fuwu_box">
        <div class="list">
          <div class="box" @click="toNews">
            <p class="text">消息通知设置</p>
            <van-icon name="arrow" />
          </div>
          <!-- <div class="box" @click="callPhone">
            <p class="text">专属客户</p>
            <van-icon name="arrow" />
          </div> -->
        </div>
      </div>
      <div class="fuwu_box">
        <div class="list">
          <div class="box" @click="toFeedback">
            <p class="text">意见反馈</p>
            <van-icon name="arrow" />
          </div>
          <div class="box" @click="toSet">
            <p class="text">设置</p>
            <van-icon name="arrow" />
          </div>
        </div>
      </div> 
    </div>
    
    
  </div>
</template>

<script>
import { 
  getUserPhone,
  getLatitude,
  getLongitude,
} from "@/utils/auth";
import { mapState,mapActions } from 'vuex'
// getMyAssets
import { getStoreBase } from "@/api";
export default {
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      moneyNum:'0.00',
      userPhone:'',
      assetsMsg:{},// 我的资产
      iskefu:false,
      myStore:{}
    };
  },

  computed: {
    ...mapState({
      role: state => state.user.role,
    })
  },
  methods: {

    // 跳转编辑店铺
    toEditStore(){
      wx.navigateTo({
        url: `/pages/addStore/main?isEdit=1&storeId=${this.myStore.id}`,
      });
    },

    // 跳转我的学习
    toXuexi(){
      this.$toast('该功能即将开放！')
    },

    // 跳转消息
    toNews(){
      this.$toast('该功能即将开放！')
      return
      wx.navigateTo({
        url: `/pages/my/news/main`,
      });
    },

    // 跳转服务升级
    toUpgrade(){
      this.$toast('该功能即将开放！')
      return
      wx.navigateTo({
        url: `/pages/my/upgrade/main`,
      });
    },

    // 跳转意见反馈
    toFeedback(){
      this.$toast('该功能即将开放！')
      return
      wx.navigateTo({
        url: `/pages/my/feedback/main`,
      });
    },

    // 跳转设置
    toSet(){
      wx.navigateTo({
        url: `/pages/my/set/main`,
      });
    },

    // 专属客服
    callPhone() {
      wx.navigateTo({
        url: `/pages/my/kefu/main`,
      });
    },

    // 跳转续费
    toRenew(){
      wx.navigateTo({
        url: `/pages/home/renew/main?storeId=${this.myStore.id}`,
      });
    },
  
    // 店铺信息
    getStoreMsg(){
      getStoreBase().then(res=>{
        if(res.statusCode == '00000'){
          res.data.validTime = res.data.validTime.split(' ')[0]
          this.myStore = res.data
        }
      })
    },
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      },
    });
  },
  onShow() {
    this.getStoreMsg()
  },
  onLoad() {
  },

  onTabItemTap(){
    wx.vibrateShort({type:'heavy'});
  }
};
</script>

<style lang="scss" scoped>
.content_box {
  height: 100vh;
  background: #F5F5F5;  
  .tx_msg{
    position: relative;
    z-index: 100;
    margin-bottom:30rpx;
    display: flex;
    justify-content: space-between;
    height: 460rpx;
    .bj{
      width: 100%;
      height: 460rpx;
      position: absolute;
      bottom:0;
      left:0;
      z-index: 10;
    }
    .box{
      position: relative;
      z-index: 11;
      display: flex;
      // background: #2D8EF5;
      padding:0 30rpx;
      margin-top:60rpx;
      .tx{
        width: 110rpx;
        height: 110rpx;
        margin-right:30rpx;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          width: 80rpx;
          height: 80rpx;
        }
      }
      .msg{
        max-width: 76%;
        height: 120rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .tell{
          font-size:40rpx;
          font-weight: 500;
          color:#fff;
        }
        .text{
          font-size:26rpx;
          color:#fff;
        }
      }
    }
    .anniu{
      margin-right:30rpx;
      width: 170rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size:28rpx;
      border-radius: 50rpx;
      background: #e4393c;
      color:#fff;
      position: relative;
      z-index: 11;
      margin-top:80rpx;
    }
  }
  .tab_box{
    width: 92%;
    background: #fff;
    padding:40rpx 0;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-around;
    margin:30rpx auto;
    text-align: center;
    position: relative;
    z-index: 50;
    .tab{
      display: flex;
      flex-direction: column;
      align-items: center;
      .num{
        font-size:50rpx;
        font-weight: bold;
      }
      .text{
        font-size:26rpx;
        margin-top:15rpx;
        height: 30rpx;
        line-height: 30rpx;
      }
    }
  }
  .my_service{
    margin:-260rpx auto 20rpx auto;
    position:relative;
    z-index: 100;
  }
  .fuwu_box{
    background: #fff;
    margin:30rpx auto 0 auto;
    padding:0 30rpx 0rpx 30rpx;
    width: 84%;
    border-radius: 15rpx;
    .list{
      .box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 110rpx;
        border-bottom:1px solid #f5f5f5;
        font-size:30rpx;
      }
    }
  }
  .line{
    height: 20rpx;
    background: #F5F5F5;
  }
  
  .bottm_bar{
    margin:50rpx 0;
    width: 100%;
    .b1{
      width: 100%;
      font-size:28rpx;
      color:rgb(182, 182, 182);
      text-align: center;
      span{
        font-weight: 500;
      }
    }
  }
}
</style>